import React, { forwardRef, useEffect, useState } from 'react';
import { Modal } from 'antd';
import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/shell/shell';
import 'codemirror/';
// 引入背景主题
import 'codemirror/theme/yonce.css';
// @ts-ignore
import { UnControlled as CodeMirror } from 'react-codemirror2';
// import { parse } from 'qs';
import './loadding.css';
// @ts-ignore
const CodeMirrorShell: React.ForwardRefExoticComponent<
  React.PropsWithoutRef<{
    defaultValue?: string;
    onchange: Function;
    onOk: Function;
    okCancel: Function;
    open: boolean;
  }> &
    React.RefAttributes<unknown>
> = forwardRef(
  (props: {
    defaultValue: string;
    onchange: Function;
    onOk: Function;
    okCancel: Function;
    open: boolean;
  }) => {
    let edit: CodeMirror | null = null;
    useEffect(() => {
      setTimeout(() => {
        if (edit != null && edit.editor != null) {
          edit.editor.setValue(edit.editor.getValue());
        }
      });
    }, [props.open]);
    // @ts-ignore
    return (
      <Modal
        title={'编辑'}
        open={props.open}
        onOk={() => {
          props.onOk();
        }}
        onCancel={() => {
          props.okCancel();
        }}
        width={'640px'}
        style={{ height: '800px;' }}
      >
        <CodeMirror
          value={props.defaultValue} // 设置CodeMirror标签的初始值
          // 设置CodeMirror标签的相关参数
          options={{
            mode: 'shell', // 设置该代码编译器所编辑的语言
            theme: 'yonce', // 代码编译器主题
            lineNumbers: true, // 显示行号
          }}
          // 编译器内容变化后，输出变化后的内容
          onChange={(code: string) => {
            props.onchange(code);
          }}
          ref={(c) => (edit = c)}
        />
      </Modal>
    );
  },
);

export default CodeMirrorShell;
